/* eslint-disable */
<template>
	<div class="validityDate">
		<!--选择有效时间-->
		<el-dialog class="dateForm" :title="$t('components.validityDate.title')" :visible.sync="show" width="25%"   @close="closeDialog" :close-on-click-modal="false">
			<el-form :rules="rules"  :inline="false" :model="dialogForm" ref="dialogForm" label-width="100px" >
				<el-form-item :label="$t('common.startTm')+':'" prop="startTm" v-if="path!=='noStart'">
					<el-date-picker :disabled="path=='limitToday' || dataStatus==1"  :picker-options="pickerOptions1" value-format="yyyy-MM-dd" @change="checkDateValid('startTm')"  v-model="dialogForm.startTm"  type="date"  :placeholder="$t('common.selectDate')"> </el-date-picker><span class="desc">（{{$t('components.validityDate.startTime')}}）</span>
				</el-form-item>
				<el-form-item :label="$t('common.endTm')+':'" prop="endTm">
					<el-date-picker :picker-options="pickerOptions1" value-format="yyyy-MM-dd" @change="checkDateValid('endTm')"  v-model="dialogForm.endTm"  type="date"  :placeholder="$t('common.selectDate')"> </el-date-picker><span class="desc">（{{$t('components.validityDate.endTime')}}）</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">{{$t('common.giveUp')}}</el-button>
				<el-button type="primary" @click="submitForm">{{$t('common.save')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
    Message, Notification, MessageBox, Loading
} from 'element-ui'
export default {
    name: 'validityDate',
    props: [
        'visible', 'earliestTime', 'latestTime', 'start', 'end', 'path'
    ],
    data () {
        return {
            show: false,
            dialogForm: {
                startTm: '',
                endTm: ''
            },
            pickerOptions1: {},
            rules: {
                startTm: [
			            { required: true, message: this.$t('validateWornText.slectStartTm'), trigger: 'change' }
			        ],
			        endTm: [
			            { required: true, message: this.$t('validateWornText.slectEndTm'), trigger: 'change' }
			        ]
            },
            dataStatus: 0 // dataStatus：0未生效，1生效中，2失效,失效状态不会进入这个页面
        }
    },
    watch: {
        visible: 'visibleChange'
    },
    mounted () {
    },
    methods: {
        visibleChange (val) {
            this.show = val
            var that = this
            this.pickerOptions1 = {
                disabledDate (time) {
			            return (time.getTime() < new Date(that.earliestTime - 24 * 60 * 60 * 1000).getTime()) || (time.getTime() > new Date(that.latestTime).getTime())
			        }
            }
            if (this.start) {
                this.dialogForm.startTm = this.start
                if (this.dialogForm.startTm > this.$format(new Date().getTime(), "yyyy-MM-dd")) { // 还未生效
                    this.dataStatus = 0
                } else {
                    this.dataStatus = 1 // 生效中只能修改开始生效日期
                }
            }
            if (this.end) {
                this.dialogForm.endTm = this.end
            }
            if (this.path == 'limitToday') { // 开始时间默认为今天
                this.dialogForm.startTm = this.$format(new Date().getTime(), "yyyy-MM-dd")
            }
        },
        checkDateValid (param) {
            if (this.dialogForm.startTm != '' && this.dialogForm.endTm != '') {
                if (this.dialogForm.startTm > this.dialogForm.endTm) {
                    this.$message({
					          message: this.$t('common.conmareEndTimeTip'),
					          type: 'warning'
					    })
                    this.dialogForm[param] = ''
                }
            }
        },
        closeDialog () {
            this.$refs['dialogForm'].resetFields()// 重置表单
            this.$emit('validityDateClose')
        },
        submitForm () {
            this.$refs['dialogForm'].validate((valid) => {
				    if (valid) {
                    this.$emit('submitDateForm', this.dialogForm)
				    } else {
                    return false
                }
            })
        }
    }
}
</script>
<style lang="less">
.validityDate{
	.dateForm{
		.el-dialog{
			min-width: 560px;
		}
		.desc{
			color: #999CA1;
		}
		.el-dialog__title{
			font-size: 16px;
			font-weight: bold;
		}
	}
}
</style>
